1.3.2 编译Web客户端源码

1.简介：

E聊SDK提供了一个基本的Web版客户端Demo源码，通过编译该客户端，可以接入E聊服务器，实现单聊/群聊等功能。最新WEB客户端源码仅包含Demo部分，直接使用已编译好的echatim-sdk.js。以下介绍如何从源码编译Web客户端Demo。

2.操作步骤:

2.1 下载源码

git clone https://gitee.com/dzqmeiji/echatim-client-web.git
cd echatim-client-web/

2.2 编辑客户端连接配置

情况1: 我们使用本地服务器做为聊天后台，配置更改为本地的配置，只需在src/main.js 中更改AppKey 的配置项即可。

//      src/main.js 文件内容
719     sdkConfig.host = 'localhost';  //使用本地服务器
720     sdkConfig.httpPort = 8082;  //使用本地默认配置
721     sdkConfig.socketPort = 9092;  //使用本地默认配置
722     sdkConfig.key = 'TSDKTEST00001'; # 查看数据库sdk_app表
723     sdkConfig.secret = '';  // 这是保留配置, 不需要更改

情况2: 我们使用E聊线上服务器做为聊天后台，配置都使用默认的配置，只需在src/main.js 中更改AppKey 的配置项即可，账号申请方式请查看管理后台使用

//      src/main.js 文件内容
719     sdkConfig.host = 'api.echat.work';  //使用线上默认配置
720     sdkConfig.httpPort = 58082;  //使用线上默认配置
721     sdkConfig.socketPort = 59092;  //使用线上默认配置
722     sdkConfig.key = '修改这一项为自己的AppKey';
723     sdkConfig.secret = '';  // 这是保留配置, 不需要更改

2.3 编译源码并启动Web Demo项目

yarn install    #下载项目依赖
yarn start    #启动web项目

启动后访问: http://localhost:80 即可访问Web Demo项目。

2.4 嵌入Web客户端到现有的业务系统(可选)

# 这里提供一个演示demo, 说明如何通过引入一个js的方式嵌入到html中
yarn embed    #启动嵌入演示demo

2.5 打包成发布版本

这里介绍在mac, linux 上的打包方法，若开发平台是windows, 也可安装git bash工具在bash cmd 窗口上实现打包。

cd echatim-client-web  # 在项目根目录准备打包
mkdir -p dist/deploy  # 创建打包目录
cp ./src/faces.js  dist/deploy/
cp ./src/main.js  dist/deploy/
cp ./src/utils.js  dist/deploy/
cp ./src/index.html  dist/deploy/
cp ./src/login.html  dist/deploy/
cp ./src/app.html  dist/deploy/
cp -rf ./static dist/deploy/  # 拷贝static 资源目录
tar -cvzf deploy-v1.01.tar.gz  dist/deploy # 打包成ddeploy-v1.01.tar.gz 发布版本